<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>156函数剩余参数和展开运算符</title>
</head>

<body>
  <h1>156函数剩余参数和展开运算符</h1>
  <script>
    /*
      一、函数参数
        1 动态参数(函数定义时无法确定参数个数，根据实际传递进来的参数个数决定)

        2 arguments
          arguments类数组对象是所有（非箭头）函数中都可用的局部变量。
          “类数组”意味着 arguments 有length属性，并且属性的索引是从零开始的。但是它没有数组的内置方法，例如 forEach() 和 map()等等。
    */

    // arguments实现函数动态参数功能
    function sum() {
      console.log('arguments=>', arguments)
      let count = 0
      for (let i = 0; i < arguments.length; i++) {
        count += arguments[i]
      }
      return count
    }
    let res = sum(1, 2, 3, 4)
    console.log(res)

    // 3 ...运算符实现函数动态参数功能(此时...可称其为剩余参数)
    function add(...arr) {
      console.log(arr)
      let count = 0
      arr.forEach(e => {
        count += e
      })
      return count
    }
    let res2 = add(1, 2, 3)
    console.log(res2)

    function add2(a, b, ...arr2) {
      console.log(arr2)
      let count = a + b
      arr2.forEach(e => {
        count += e
      })
      return count
    }
    let res3 = add(1, 2, 3, 4, 5)
    console.log(res3)
    // 注：实际开发中，更推荐使用剩余参数，因为获取到的数据是个数组，方便后续的数据处理。

    /* 
      4 展开运算符
        将数组展开
        求数组最值
        合并数组
    */

    // 将数组展开
    let arr = [1, 2, 3]
    console.log(...arr)

    // 求数组的最值
    let arr2 = [4, 5, 6]
    console.log(Math.max(...arr2))
    console.log(Math.min(...arr2))

    // 合并数组
    console.log([...arr, ...arr2])
  </script>
</body>

</html>